<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap 实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 引入样式 -->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!-- 引入组件库 -->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
</head>
<body class="container">
    <h2>表格</h2>
    <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>
    <div id="example-2" class="with:80% table-responsive">
        <table id="table"  class="table table-hover">
            <thead>
            <tr>
                <th>#编号</th>
                <th>兵器种类</th>
                <th>攻击范围</th>
                <th>价格</th>
                <th>造型</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody >
            <tr v-for="item in items " @click="itemSel">
                <td>{{ item.id }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.range }}</td>
                <td>{{ totalMoney }}</td>
                <td><img :src="item.imgUrl" alt="暂未上传图片"   width="120" height="75" class="img-responsive img-thumbnail"></td>
                <td><a class="btn btn-info" role="button" data-toggle="modal" data-target="#myModal" @click="editForm">编辑</a>&nbsp;&nbsp;&nbsp;<a class="btn btn-danger" role="button" :data-num="item.id" ref="dataNum" @click="delItem">删除</a></td>
            </tr>
            </tbody>
        </table>
        <div class="form-group">
            <div class="col-sm-2 control-label">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"  @click="addForm">新增</button>
            </div>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新增/编辑 兵器信息
                    </h4>
                </div>
                <form id="weaponForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="id">编号</label>
                            <input type="text" class="form-control" name="id" id="id" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="type">种类名称</label>
                            <input type="text" class="form-control" name="type" id="type" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="range">攻击范围</label>
                            <select class="form-control" name="range" id="range">
                                <option>近战</option>
                                <option>远程</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="sex1">职业</label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sex1" value="boy"> 男性
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sex2" value="girl"> 女性
                        </label>
                        </div>
                        <div class="form-group">
                            <label for="file">图片上传</label>
                            <input type="file" id="file">
                            <p class="help-block">请上传武器图片</p>
                        </div>
                    </div>
                </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button id="saveBtn" type="button" class="btn btn-primary">
                            保存
                        </button>
                    </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <script>
        var example2 = new Vue({
            el: '#example-2',
            data: {
                totalMoney: 0,
                items: [
                    { id: '1', type: '剑', range: '近战' },
                    { id: '2', type: '弓', range: '远程' }
                ]
            },
            mounted: function () {
                //这个是钩子函数
                //如果cartView函数要执行，必须先执行钩子函数
                //这个钩子函数完成了对cratView函数的调用
                //应该注意的是，使用mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入 Vue.nextTick/vm.$nextTick
                this.$nextTick(function () {
                    this.cartView();
                    window.cartView = this.cartView;    // 方法赋值给window
                })
            },
            methods: {
                //这个是要执行的函数
                cartView: function() {
                    var _this = this;
                    axios.get('/list', {
                        params: {}
                    })
                         .then(function (response) {
                              console.log(response);
                             _this.items = response.data;
                             _this.totalMoney = "2";
                         })
                         .catch(function (error) {
                              console.log(error);
                         });
//                    this.$http.get("list", {}).then(function(res) {
//                        _this.items = res.body.result.list;
//                        _this.totalMoney = "2";
//                    });
                },
                //选中行
                itemSel: function (e) {
                    console.log(e);
                },
                //新增
                addForm: function(event){
//                    $("#form")取得id为form的jQuery对象
//                    $("#form")[0]可以把这个jquery对象转成html对象
//                    后面的.reset()方法不是jquery对象的方法，但是是html对象的方法
                    $('#weaponForm')[0].reset();
                    $("#id").attr("readonly",true);
//                    $("#id").val("hello world!");
                },
                //编辑
                editForm: function(event){
                    $('#weaponForm')[0].reset();
                    $("#id").removeAttr("readonly");
                },
                delItem: function(e){
                    //方法一：操作DOM
//                    console.log(this.$refs.dataNum.dataset.num); //item.id
                    //方法二：通过e.target.getAttribute
//                    console.log(e.target.getAttribute('data-num'));//item.id
                    var id =  e.target.getAttribute('data-num');
                    var _this = this;
                    axios.get('/delete', {
                        params: {id:id}
                    })
                            .then(function (response) {
//                                console.log(response);
                                if(response.data){
                                    alert("删除成功");
                                    example2.cartView();
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                }
            }
        })
    </script>
    <script>

        function getSaveUrl(id){
            console.log(id)
            var url;
            if ( undefined == id.val || id.val()=="" ){
                url = "/add";
            }else {
                url = "/update";
            }
            return url;
        }
        $("#saveBtn").on("click", function(){
            var id = $("input[name=id]");
            var type = $("input[name=type]");
            var range = $("#range option:selected").text();//选中的文本
//            var rangeVal = $("#range option:selected") .val();//选中的值
//            var rangeIndex = $("#range ").get(0).selectedIndex;//索引
            var sex = $('input[name="sex"]:checked').text();
            if (id.val == ""){
                //确保输入了数据，否则CSS高亮显示
                id.addClass("hightlight");
                return false;
            }else {
                id.removeClass("hightlight");
            }
            if (type.val == ""){
                //确保输入了数据，否则CSS高亮显示
                type.addClass("hightlight");
                return false;
            }else {
                type.removeClass("hightlight");
            }
            //FormData的主要用途：将form表单元素的name与value进行组合，实现表单数据的序列化，
            // 从而减少表单元素的拼接，提高工作效率。异步上传文件
            var formObJ = $("#weaponForm").get(0);
            var formData = new FormData(formObJ);
//            console.log("id " + formData.get("id"));
            if ($("#file")[0].files.length>0){
                var file = $("#file")[0].files[0];
            }else {
                alert("请选择图片");
                return;
            }
            formData.set("file", file);
            console.log("file " + formData.get("file"));
            $.ajax({
//                url: "/add",
                url: getSaveUrl(id),
                type: 'post',
                data: formData,
                async: false,
                cache: false,
                contentType: false, //一定要写
                processData: false, //一定要写
                success: function (result) {
                    //判断数据是不是成功修改
                    if (result.rows == 1) {
                        alert("保存成功,图片url: " + result.impUrl);
                        $('#myModal').modal('hide');
//                        window.location.reload();
                        cartView();
                    } else {
                        alert("保存失败");
                    }

                },
                error: function (data) {
                    alert("网络请求失败，请重试！");
                }
            })
        });
    </script>
</body>
</html>